<template>
	<view class="container">
		<!-- 运单号 / 运输状态 -->
		<view class="uni-flex order-no-item">
			<view class="order-item-text"
				style="-webkit-flex: 1;flex: 1;font-size: 26rpx; color: rgba(41, 43, 53, 0.8);">
				运单号：123456789123
			</view>
			<view class="order-item-text"
				style="-webkit-flex: 1;flex: 1; align-items: flex-end; justify-content: flex-end; color: rgba(255, 102, 0, 1);">
				询价中
			</view>
		</view>
		<!-- 询价中 -->
		<view style="width: 100%;">
			<!-- 起点 / 终点 -->
			<view class="uni-flex order-location-item" style="margin-top: 30rpx;">
				<view
					style="-webkit-flex: 1;flex: 1;text-align: end; font-size: 40rpx; font-weight: bold; color: rgba(41, 43, 53, 1);">
					北京
				</view>
				<view style="
						display: flex;
						align-items: center;
						padding: 0rpx 40rpx;
						flex-direction: column;
						justify-content: center;">
					<image style="width: 70rpx; height: 20rpx;" src="@/static/ic_order_location.png"></image>
				</view>
				<view
					style="-webkit-flex: 1;flex: 1;text-align:start; font-size: 40rpx; font-weight: bold; color: rgba(41, 43, 53, 1);">
					上海市
				</view>
			</view>
		</view>
		<!-- 运车时间 -->
		<view style="display: flex; justify-content: center;">
			<View class="order-location-datetime">运车时间：2023-12-12</View>
		</view>
		<!-- 价格表 -->
		<view style="width: 100%; margin-top: 25rpx;">
			<View style="display: flex; justify-content:center; align-items: center;">
				<view class="order-item-text" style="-webkit-flex: 1;flex: 0.5;">小板直达预计金额</view>
				<view
					style="width: 100%; display: flex; -webkit-flex: 1;flex: 1; justify-content: flex-end; align-items: center;">
					<view style="font-size: 30rpx; color: rgba(255, 102, 0, 1);">
						1000 - 4200
					</view>
					<view style="font-size: 24rpx; color: rgba(255, 102, 0, 1); margin-left: 5rpx;">
						元
					</view>
				</view>
			</View>
			<View style="display: flex; justify-content:center; align-items: center; margin-top: 10rpx;">
				<view class="order-item-text" style="-webkit-flex: 1;flex: 0.5;">联运承运预计金额</view>
				<view
					style="width: 100%; display: flex; -webkit-flex: 1;flex: 1; justify-content: flex-end; align-items: center;">
					<view style="font-size: 30rpx; color: rgba(255, 102, 0, 1);">
						1000 - 4200
					</view>
					<view style="font-size: 24rpx; color: rgba(255, 102, 0, 1); margin-left: 5rpx;">
						元
					</view>
				</view>
			</View>
		</view>
		<!-- 提示 -->
		<view style="width: 100%;color: rgba(41, 43, 53, 0.5);font-size: 22rpx;margin-top: 25rpx;">
			*该报价为预估报价，请保持电话通畅；客服会根据您的需求给出具体报价
		</view>
		<view class="uni-flex" style="width: 100%; margin-top: 9rpx;">
			<view style="-webkit-flex: 1;flex: 1"></view>
			<view class="order">咨询客服</view>
			<view class="order"
				style="margin-left: 10rpx; background-color: rgba(62, 59, 54, 1); color: rgba(248, 216, 73, 1);">
				完善信息 >
			</view>
		</view>
		<!-- 询价时间 -->
		<view class="order-datetime">询价时间：2024.09.04 12:00</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemData: {
				id: 0,
				open: false,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {},
	}
</script>
<style lang="scss">
	@import '@/common/uni-nvue.css';

	.container {
		width: 100%;
		height: auto;
		padding: 0rpx 25rpx;
		box-sizing: border-box;
	}

	.order-no-item {
		width: 100%;
		padding: 21rpx 0rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.order-item-text {
		width: 100%;
		display: flex;
		color: rgba(41, 43, 53, 1);
		font-size: 26rpx;
	}

	.order-location-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10rpx;
	}

	.order-location-datetime {
		margin-top: 19rpx;
		width: auto;
		font-size: 22rpx;
		color: rgba(41, 43, 53, 0.6);
		background-color: rgba(245, 246, 248, 1);
		border-radius: 25rpx;
		padding: 9rpx 60rpx;
	}

	.order-car-info {
		margin-top: 25rpx;
		width: 100%;
		padding: 20rpx 35rpx;
		background-color: rgba(246, 247, 250, 1);
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.order-car-info-text {
		width: 100%;
		color: #999999;
		padding-top: 12rpx;
		font-size: 24rpx;
		color: rgba(41, 43, 53, 0.7);
	}

	.order-datetime {
		margin-top: 24rpx;
		width: 100%;
		padding: 21rpx 0rpx;
		color: rgba(41, 43, 53, 0.7);
		font-size: 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #f4f4f4;
	}

	.order {
		width: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 50rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 26rpx;
		font-weight: bold;
	}
</style>